﻿<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>纯js翻书效果，让分页更炫</title>
    <meta http-equiv=imagetoolbar content=no>
    <script src="paging.js"></script>
    <style type=text/css>
        /*#center {
            LEFT: 50%;
            POSITION: absolute;
            TOP: 50%;
        }

        #DHTMLBOOK {
            BACKGROUND: #000;
            LEFT: -210px;
            VISIBILITY: hidden;
            WIDTH: 420px;
            POSITION: relative;
            TOP: -160px;
            HEIGHT: 320px;
        }

        #TXTBOX {
            FONT-SIZE: 0.8em;
            WIDTH: 410px;
            COLOR: #aba193;
            FONT-FAMILY: verdana;
            POSITION: absolute;
            TOP: 320px;
            TEXT-ALIGN: center;
        }

        .page {
            OVERFLOW: hidden;
            BORDER-LEFT: #000000 1px solid;
            WIDTH: 50%;
            CURSOR: pointer;
            POSITION: absolute;
            HEIGHT: 100%;
        }

        .right {
            BORDER-RIGHT: #000000 1px solid;
            LEFT: 50%;
        }

        .turn {
            BACKGROUND: #000000;
        }

        .img {
            WIDTH: 200%;
            POSITION: absolute;
            HEIGHT: 100%;
        }*/
    </style>

    <script type=text/javascript>
<!--

//document.onselectstart = function () { return false; }

//var nI  = 0;
//var kI  = 0;
//var run = false;

//function setOpacity(obj,o) {
//	if (o<0) o=0; else if (o>100) o = 100;
//	if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;
//}
//function TPR__(p) {
//	P1.style.left  = 50-(2.5*p)+"%";
//	P1.style.width = (2.5*p)+"%";
//	setOpacity(P1i, .5*p*p);
//	if (p == 20) run = false;
//}
//function TPR_(p) {
//	P2.style.width = 50-(2.5*p)+"%";
//	setOpacity(P2i, 100-.5*(p*p));
//	if (p == 20) {
//		P2i.src = IMGSRC[kI].src;
//		setOpacity(P2i, 100);
//		P2.style.width = "50%";
//		for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);
//	}
//}
//function TPR() {
//	if (!run) {
//		run = true;
//		P01i.src = IMGSRC[kI].src;
//		P1.style.width = 0;
//		kI++;
//		if (kI>=nI) kI = 0;
//		titLe(kI);
//		P02i.src = IMGSRC[kI].src;
//		P1i.src  = IMGSRC[kI].src;
//		for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);
//	} else setTimeout("TPR()", 100);
//}

//function TPL__(p) {
//	P2.style.width = (2.5*p)+"%";
//	setOpacity(P2i, .5*p*p);
//	if (p == 20) run = false;
//}
//function TPL_(p) {
//	P1.style.left  = (2.5*p)+"%";
//	P1.style.width = 40+(10-2.5*p)+"%";
//	setOpacity(P1i, 100-.5*(p*p));
//	if (p == 20) {
//		P1i.src = IMGSRC[kI].src;
//		setOpacity(P1i, 100);
//		P1.style.left  = 0;
//		P1.style.width = "50%";
//		for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);
//	}
//}
//function TPL() {
//	if (!run) {
//		run = true;
//		P02i.src = IMGSRC[kI].src;
//		P2.style.width = 0;
//		kI--;
//		if (kI < 0) kI = nI-1;
//		titLe(kI);
//		P01i.src = IMGSRC[kI].src;
//		P2i.src  = IMGSRC[kI].src;
//		for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);
//	} else setTimeout("TPL()", 100);
//}
//function titLe(p) {
//	document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;
//}
//onload = function() {
//	IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");
//	DB      = document.getElementById("DHTMLBOOK");
//	P01     = DB.getElementsByTagName("span")[0];
//	P01i    = P01.getElementsByTagName("img")[0];
//	P02     = DB.getElementsByTagName("span")[1];
//	P02i    = P02.getElementsByTagName("img")[0];
//	P1      = DB.getElementsByTagName("span")[2];
//	P1i     = P1.getElementsByTagName("img")[0];
//	P2      = DB.getElementsByTagName("span")[3];
//	P2i     = P2.getElementsByTagName("img")[0];
//	nI      = IMGSRC.length;
//	P1i.src = IMGSRC[kI].src;
//	P2i.src = IMGSRC[kI].src;
//	titLe(kI);
//	DB.style.visibility = "visible";
//}
//-->
    </script>

    <meta content="MSHTML 6.00.6000.16809" name=GENERATOR>
</head>
<body>

    <div id=center>
        <div id=DHTMLBOOK>
            <span class=page onmousedown="return false;" ondblclick=TPL(); onclick=TPL();><img class=img></span>
            <span class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><img class=img style="LEFT: -100%"></span>
            <span class="page turn" onmousedown="return false;" ondblclick=TPL(); onclick=TPL();><img class=img style="FILTER: alpha(); opacity: 1"></span>
            <span class="page turn right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><img class=img style="FILTER: alpha(); LEFT: -100%; opacity: 1"></span>
            <div id=TXTBOX></div>
        </div>
    </div>
    <div id=imgsrc style="VISIBILITY: hidden">
        <img alt="In the early morning he departed." src="http://www.lanrentuku.com/down/js/images/12499727220.jpg">
        <img alt="Believing she had dreamed of the roar of his bike," src="http://www.lanrentuku.com/down/js/images/12499727221.jpg">
        <img alt="she woke up to the sunshine in her eyelids." src="http://www.lanrentuku.com/down/js/images/12499727222.jpg">
    </div>

    <div id="paging" style="margin:0 auto;width:500px">
        <div style="width:500px;margin:0 auto">

            纯javascript验证库详解

            还是坚持一贯的原则，编写任何一个插件的时候不引用其它框架。这样做的好处与坏处、



            好处：耦合度降低，提升自我编码水平，总有一天你就能成为编写框架的大神。

            坏处：琐碎，耗时一点。



            javascript的验证网上铺天盖地很多，jquery.validate.js也是非常强大的。为什么还要重复造轮子呢？

            1、我喜欢所有的js插件都是在自己可控范围内，特别是高频率用到的插件。

            2、纯js，减少库的依赖，我这里的验证库就100来行。



            假设我有某个页面，就是验证是下帐号是否非法.......非得让我去引用上万行的jquery。。。。这尼玛不科学啊！ 所以我重复造了这个轮子。



            我喜欢先把最终的效果预设好，然后再朝着这个目标走下去。

            先看html代码与调用代码，之后我们再慢慢分析实现代码

        </div>
        <div style="width:500px;margin:0 auto;display:none;">
            html代码中，有2个文本框，1个按钮，按钮是用来触发验证的（当然后面及时验证肯定是少不了的）

            分析文本框，它有2个自定义的属性  data-validate-option（定义了验证的类型） data-validate-message（定义了验证不通过时提示的消息）

            分析js代码，被注释掉的代码是自定义验证的uiback（默认验证的提示提供了一种悬浮的提示框，效果不错），假设你要自定义验证提示消息的显示方式，那么就用第一种，而觉得默认的已经够炫的话，你也可以保持默认的，反正就是尽量的灵活。

            在它的构造函数残里，有个doc的属性，它是我们验证的关键，指定了需要验证的控件或“区域”，如果此项为空，那么将验证整个html，即包含在页面上所有需要验证的元素。



            好了，参数非常的简单，简单的不能再简单了。下面直接上效果图：


        </div>
    </div>
</body>
</html>

<script type="text/javascript">
    $paging("paging").bind();

</script>